// src/components/popups/userActions/Profile.tsx

import React, { useEffect } from "react";
import { useUserStore } from '@/store/userStore';
import { IoPersonCircleOutline } from "react-icons/io5";

const Profile: React.FC<{ onClose: () => void }> = ({ onClose }) => {
  const { user, refreshUserPermissions } = useUserStore();

  useEffect(() => {
    refreshUserPermissions();
  }, [refreshUserPermissions]);
  const { firstName, lastName, email, role, permissions } = user;

  const permissionMap: Record<number, string> = {
    1: "Scholars Dashboard: View",
    2: "Scholars Dashboard: Edit",
    3: "Sponsors Dashboard: View",
    4: "Sponsors Dashboard: Edit",
    5: "Scholars Reports: View",
    6: "Scholars Reports: Export",
    7: "Sponsors Reports: View",
    8: "Sponsors Reports: Export",
    9: "Scholars Dashboard: None",
    10: "Sponsors Dashboard: None",
    11: "Scholars Reports: None",
    12: "Sponsors Reports: None",
  };

  const groupedPermissions = Object.entries(
    permissions.reduce<Record<string, string[]>>((acc, id) => {
      const entry = permissionMap[id];
      if (entry) {
        const [module, action] = entry.split(": ");
        if (!acc[module]) acc[module] = [];
        acc[module].push(action);
      }
      return acc;
    }, {})
  );

  return (
    <div
      className="fixed inset-0 z-[1000] flex items-center justify-center bg-black/60 dark:bg-black/80 backdrop-blur-sm px-1 py-4 sm:p-6 animate-fade-in font-poppins"
      onClick={onClose}
    >
      <div
        className="relative w-full max-w-md w-[95%] max-h-[70vh] overflow-y-auto bg-white dark:bg-slate-900 rounded-3xl shadow-2xl dark:shadow-blue-900 border border-gray-200 dark:border-slate-800 animate-fade-in-up transition-all duration-300"
        onClick={(e) => e.stopPropagation()}
      >
        {/* Header */}
        <div className="relative bg-white dark:bg-slate-900 text-gray-800 dark:text-cyan-200 px-4 py-4 flex items-center gap-4 border-b border-gray-200 dark:border-slate-800 rounded-t-3xl shadow-sm">
          <IoPersonCircleOutline size={60} className="text-blue-600 dark:text-cyan-400 drop-shadow-sm" />
          <div>
            <h2 className="text-lg sm:text-2xl font-extrabold text-blue-700 dark:text-cyan-300 leading-tight tracking-tight">
              {firstName} {lastName}
            </h2>
            <p className="text-xs sm:text-base text-gray-500 dark:text-cyan-200 font-semibold">{role}</p>
          </div>
          <button
            onClick={onClose}
            className="absolute right-3 top-3 w-9 h-9 flex items-center justify-center text-gray-500 dark:text-gray-300 text-xl font-bold rounded-full hover:bg-red-50 dark:hover:bg-red-900 hover:text-red-600 dark:hover:text-red-300 transition"
          >
            ×
          </button>
        </div>
        {/* Info Section */}
        <div className="p-2 sm:p-6 space-y-5 text-gray-800 dark:text-gray-100 text-xs sm:text-base">
          {/* Basic Info */}
          <div className="border border-gray-200 dark:border-slate-700 rounded-2xl p-3 sm:p-4 bg-white/90 dark:bg-slate-800 shadow-sm">
            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4 sm:gap-6">
              <div>
                <p className="text-xs sm:text-sm text-blue-700 dark:text-cyan-300 font-semibold mb-1">First Name</p>
                <p>{firstName}</p>
              </div>
              <div>
                <p className="text-xs sm:text-sm text-blue-700 dark:text-cyan-300 font-semibold mb-1">Last Name</p>
                <p>{lastName}</p>
              </div>
              <div>
                <p className="text-xs sm:text-sm text-blue-700 dark:text-cyan-300 font-semibold mb-1">Email</p>
                <p>{email}</p>
              </div>
              <div>
                <p className="text-xs sm:text-sm text-blue-700 dark:text-cyan-300 font-semibold mb-1">Role</p>
                <p>{role}</p>
              </div>
            </div>
          </div>
          {/* Permissions */}
          <div className="space-y-4">
            <h3 className="text-xs sm:text-sm font-semibold text-blue-700 dark:text-cyan-300 mb-2">Permissions</h3>
            {groupedPermissions.length > 0 ? (
              <div className="grid grid-cols-1 sm:grid-cols-2 gap-3 sm:gap-4">
                {groupedPermissions.map(([module, actions]) => (
                  <div
                    key={module}
                    className="border border-blue-200 dark:border-cyan-700 bg-blue-50/50 dark:bg-slate-800 rounded-xl p-3 sm:p-4"
                  >
                    <p className="font-semibold text-blue-700 dark:text-cyan-300 border-b border-blue-200 dark:border-cyan-700 pb-1 mb-2 text-sm sm:text-base">
                      {module}
                    </p>
                    <div className="flex flex-wrap gap-2">
                      {actions.map((action, i) => (
                        <span
                          key={i}
                          className="px-3 py-1 rounded-full text-xs sm:text-sm font-medium bg-white dark:bg-slate-900 text-blue-700 dark:text-cyan-300 border border-blue-300 dark:border-cyan-700 shadow-sm hover:shadow transition"
                        >
                          {action}
                        </span>
                      ))}
                    </div>
                  </div>
                ))}
              </div>
            ) : (
              <p className="text-gray-400 dark:text-gray-500 italic text-xs sm:text-sm">No permissions assigned.</p>
            )}
          </div>
        </div>
      </div>
    </div>
  );
};

export default Profile;